<template>
	<view class="calendar-page">
		<view class="calendar-dark">
		  <darkCalendar  @change_choose="change_choose" />
		</view>
		<view class="calendar-part">
			<text>打卡人数：41/43  阅读：23  运动：33  家务：36</text>
			<button type="primary">设置</button>
		</view>
		<view class="calendar-sign">
			<view class="each-student">
				<view class="student-name">
					<text>学生：张一中</text>
					<text>{{date}}</text>
				</view>
				<view class="student-read">
				    <text>阅读</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import darkCalendar from '@/components/darkCalendar/ss-calendar.vue';
  export default{
	  components:{
		  darkCalendar
	  },
	  data(){
		  return{
			  signeddates:['2020-1-1','2020-1-2','2020-1-3','2020-1-4','2020-1-5','2020-1-6','2020-1-7'],
			  date:""
		  }
	  },
	  methods:{
		  change_choose(date){
			  console.log(date,'父级过来的')
			  this.date=date;
		  }
	  }
  }
</script>

<style lang="scss" scoped>
	page,.calendar-page{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		&>.calendar-dark{
			width: 100%;
			height: auto;
		}
		&>.calendar-part{
			width: 100%;
			height: 180upx;
			display: flex;
			position: relative;
			flex-direction: column;
			padding: 20upx 0upx;
			box-sizing: border-box;
			&>text{
				font-size: 32upx;
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 20upx;
				box-sizing: border-box;
			}
			&>button{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				font-size: 32upx;
				border:none;
				background: #409EFF;
			}
			&::after{
				position: absolute;
				height: 2upx;
				content: "";
				bottom: 0;
				left: 0;
				width: 100%;
				background: #bfbfbf;
			}
		}
		&>.calendar-sign{
			flex: 1;
			&>.each-student{
				width: 100%;
				height: 250upx;
				position: relative;
				&>.student-name{
					height: 80upx;
					font-size: 32upx;
					padding-left: 20upx;
					box-sizing: border-box;
					&>text{
						height: 100%;
						display: flex;
						align-items: center;
					}
				}
				&>.student-read{
					height: 150upx;
					font-size: 32upx;
					padding-left: 20upx;
					box-sizing: border-box;
					&>text{
						height: 100%;
						display: flex;
						align-items: center;
					}
				}
				&::after{
					position: absolute;
					height: 2upx;
					content: "";
					bottom: 0;
					left: 0;
					width: 100%;
					background: #bfbfbf;
				}
			}
		}
	}
</style>
